<template>
    <Catagory :scene="scene" />
    <el-card style="margin:10px 0px">
        <div v-show="scene == 0">
            <el-button type="primary" icon="Plus" :disabled="categoryStore.c3Id ? false : true"
                @click="addSpu">添加SPU</el-button>
            <el-table border style="width: 100%;margin: 10px 0px;" :data="records">
                <el-table-column label="序号" type="index" align="center" width="80" />
                <el-table-column label="SPU名称" prop="spuName" width="380" />
                <el-table-column label="SPU描述" prop="description" width="" />
                <el-table-column label="操作" width="250">
                    <template #="{ row, $index }">
                        <el-button type="primary" size="small" icon="Plus" title="添加SKU"
                            @click="addSku(row)"></el-button>
                        <el-button type="primary" size="small" icon="Edit" title="修改SPU"
                            @click="updateSpu(row)"></el-button>
                        <el-button type="primary" @click="findSku(row)" size="small" icon="View" title="查看SKU列表"></el-button>
                        <el-popconfirm :title="`你确定删除${row.spuName}?`" width="290px" @confirm="deleteSpu(row)"> 
                            <template #reference>
                                <el-button type="primary" size="small" icon="Delete" title="删除SPU"></el-button>
                            </template>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="sizeChange" @current-change="changePageNo" :pager-count="9"
                v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[3, 10, 20, 50, 100]"
                :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="total" />
        </div>
        <!-- 添加/修改spu子组件 -->
        <SpuFrom ref="spu" v-show="scene == 1" @changeScene="changeScene"></SpuFrom>
        <!-- 添加sku子组件 -->
        <SkuFrom ref="sku" v-show="scene == 2" @changeScene="changeScene"></SkuFrom>
        <!-- dialog对话框:展示已有的SKU数据 -->
        <el-dialog v-model="show" title="SKU列表">
                <el-table border :data="skuArr">
                    <el-table-column label="SKU名字" prop="skuName"></el-table-column>
                    <el-table-column label="SKU价格" prop="price"></el-table-column>
                    <el-table-column label="SKU重量" prop="weight"></el-table-column>
                    <el-table-column label="SKU图片">
                        <template #="{ row, $index }">
                            <img :src="row.skuDefaultImg" style="width: 100px;height: 100px;">
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
    </el-card>

</template>
<script setup lang='ts'>
import { ref, watch ,onBeforeUnmount} from 'vue';
import { ElMessage } from 'element-plus';
import type { HasSpuResponseData, Records, SpuData, SkuData ,SkuInfoData} from '@/api/product/spu/type'
import { reqHasSpu ,reqSkuList,reqRemoveSpu} from '@/api/product/spu';
//引入分类的仓库
import useCategoryStore from '@/store/modules/category';
let categoryStore = useCategoryStore();
console.log("categoryStore=", categoryStore);
import SpuFrom from './spuFrom.vue'
import SkuFrom from './skuFrom.vue'
//定义card组件内容切换变量
let scene = ref<number>(0);//0:显示已有SPU  1:添加或者修改已有SPU 2:添加SKU的结构
let pageNo = ref<number>(1)
let pageSize = ref<number>(3)
let spu = ref<any>()
let sku = ref<any>()
let total = ref<number>()
//存储全部的SKU数据
let skuArr = ref<SkuData[]>([]);
let show = ref<boolean>(false);
//存储已有的SPU的数据
let records = ref<Records>([]);
//监听三级分类id变化
watch(() => categoryStore.c3Id, () => {
    //务必保证有三级分类id，才发起请求
    if (!categoryStore.c3Id) return
    getHasSpu()
})
//此方法执行:可以获取某一个三级分类下全部的已有的SPU
const getHasSpu = async () => {
    //修改当前页码
    // pageNo.value = pager;
    let result: HasSpuResponseData = await reqHasSpu(pageNo.value, pageSize.value, categoryStore.c3Id);
    if (result.code == 200) {
        records.value = result.data.records;
        total.value = result.data.total;
    }
}
const sizeChange = () => {
    pageNo.value = 1;
    getHasSpu();
}
const changePageNo = () => {
    getHasSpu();
}
const addSpu = () => {
    scene.value = 1;
    spu.value.initAddSpu(categoryStore.c3Id);
}
const updateSpu = (row: any) => {
    scene.value = 1;
    spu.value.initHasSpuData(row);
}
//添加sku
const addSku = (row:any)=> {
    scene.value = 2;
    sku.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, row);
}
//子组件spufrom绑定的自定义事件，目的是通知父组件切换场景
const changeScene = (obj: any) => {
    console.log("obj---",obj);
    
    scene.value = obj.flag;
    if (obj.params == 'update') {
        //更新留在当前页
        getHasSpu();
    } else {
        //添加留在第一页
        getHasSpu();
    }
}
//查看SKU列表的数据
const findSku = async (row: SpuData) => {
    let result: SkuInfoData = await reqSkuList((row.id as number));
    if (result.code == 200) {
        console.log("---------------",result.data);
        
        skuArr.value = result.data;
        //对话框显示出来
        show.value = true;
    }
}
//删除已有的SPU按钮的回调
const deleteSpu = async (row: SpuData) => {
    let result: any = await reqRemoveSpu((row.id as number));
    if (result.code == 200) {
        ElMessage({
            type: 'success',
            message: '删除成功'
        });
        //获取剩余SPU数据
        getHasSpu()
    } else {
        ElMessage({
            type: 'error',
            message: '删除失败'
        })
    }
}
//路由组件销毁的时候，把仓库分类相关的数据清空
onBeforeUnmount(() => {
    //清空仓库的数据
    categoryStore.$reset();
})
</script>
<style scoped lang='scss'></style>
